<template>
  <div>
    <div class="center_area">
      <el-row>
        <el-col :span="3">
          <div>区域:</div>
        </el-col>
        <el-col :span="21">
          <div>
            <i
              class="el-icon-d-arrow-left"
              @click="elDemo = !elDemo"
              :class="{
      Rotate_90 : elDemo
    }"
            ></i>
            等0个区域
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">
          <div>
            均价
            <i class="O_query">?</i>
            :
          </div>
        </el-col>
        <el-col :span="6">
          <div class="star_level">
            <el-tooltip
              class="item"
              effect="dark"
              content="登记评定是针对放假,设施和服务等各方面水平的综合评估"
              placement="bottom"
            >
              <div class="tooltip_main">
                <span class="el-icon-medal-1"></span>
                <span class="el-icon-medal-1"></span>
                <span class="el-icon-medal-1"></span>
                <i>¥332</i>
              </div>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="star_level">
            <el-tooltip
              class="item"
              effect="dark"
              content="登记评定是针对放假,设施和服务等各方面水平的综合评估"
              placement="bottom"
            >
              <div class="tooltip_main">
                <span class="el-icon-medal-1"></span>
                <span class="el-icon-medal-1"></span>
                <span class="el-icon-medal-1"></span>
                <i>¥332</i>
              </div>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="star_level">
            <el-tooltip
              class="item"
              effect="dark"
              content="登记评定是针对放假,设施和服务等各方面水平的综合评估"
              placement="bottom"
            >
              <div class="tooltip_main">
                <span class="el-icon-medal-1"></span>
                <span class="el-icon-medal-1"></span>
                <span class="el-icon-medal-1"></span>
                <i>¥332</i>
              </div>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询中 第一行小demo
      elDemo: true
    };
  }
};
</script>

<style lang="less" scoped>
.center_area {
  width: 580px;
  /deep/ .el-row {
    margin-bottom: 30px;
  }
  // 第一行点击变换小demo
  .el-icon-d-arrow-left {
    transform: rotateZ(90deg);
    cursor: pointer;
    color: #ff9900;
  }
  .Rotate_90 {
    transform: rotateZ(-90deg);
  }
  // 第二行问号
  .O_query {
    display: inline-block;
    font-size: 8px;
    text-align: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #cccccc;
    color: white;
    transform: translateY(-6px);
  }
  // 星级显示
  .star_level {
    .el-icon-medal-1 {
      color: orange;
    }
  }
}
</style>